<template>
  <div>
    <template>
      <el-container>
        <el-header style="background-color: #383f58">
          <titles></titles>
        </el-header>
        <el-container class="layout">
          <el-aside width="150px">
            <el-row class="tac" width="142px">
              <el-col>
                <el-menu
                  default-active="routes"
                  class="el-menu-vertical-demo"
                  @open="handleOpen"
                  @close="handleClose"
                  router
                >
                  <el-submenu
                    v-for="item in routes"
                    :index="item.path"
                    :key="item.path"
                  >
                    <template slot="title">
                      <i :class="item.meta.icon"></i>
                      <span>{{ item.meta.title }}</span>
                    </template>
                    <el-menu-item :index="item.path"
                      ><i :class="item.meta.icon2"></i>
                      {{ item.meta.names }}</el-menu-item
                    >
                    <el-menu-item :index="item.path"
                      ><i :class="item.meta.icon3"></i>
                      {{ item.meta.names2 }}</el-menu-item
                    >
                  </el-submenu>
                </el-menu>
              </el-col>
            </el-row>
          </el-aside>
          <el-main>
            <router-view></router-view>
          </el-main>
        </el-container>
      </el-container>
    </template>
  </div>
</template>
<script>
import titles from "../components/titles.vue";
export default {
  data() {
    return {
      routes: [],
    };
  },
  components: {
    titles,
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    getRouter() {
      // console.log("11", this.$router.options.routes[0].children[4]);
      this.routes = this.$router.options.routes[1].children;
      console.log(this.$router.options.routes[1].children);
    },
  },
  mounted() {
    this.getRouter();
  },
};
</script>
<style lang="scss" scoped>
.layout {
  height: 100vh;
}

.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-submenu .el-menu-item {
  min-width: 150px !important;
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  line-height: 160px;
  height: 100vh;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

:deep .el-main[data-v-7eb2bc79] {
  line-height: 0px !important;
}

</style>
